<template>
  <div class="container root card">
    <div class="wname">{{info.name}}</div>
    <div class="wtype"><span class="stitle">武器类型</span><label class="text-val">{{info.type}}</label></div>
    <div class="wrate"><span class="stitle">稀有度</span><label class="text-val">{{info.rate}}</label></div>
    <div class="wattr"><span class="stitle">锋利度</span></div>
    <div class="diliver"/>
    <div class="shark-inline"><shark-bar :data="info.shark" bigger="true"/></div>
    <div class="wattr">特性</div>
    <div class="diliver"/>
    <div class="wact"><span class="stitle">攻击</span><label class="text-val">{{info.act}}</label></div>
    <div class="wcrit"><span class="stitle">会心</span><label class="text-val">{{info.crit}}</label></div>
    <div class="wcrit"><span class="stitle">镶孔数量</span><label class="text-val">{{info.num}}</label></div>
    <div class="wcrit"><span class="stitle">属性</span>
      <label class="text-val" ><span v-for="item in info.attr" :key="item">{{item}} &nbsp;&nbsp;&nbsp;&nbsp;</span></label>
    </div>
    <div class="wcrit"><span class="stitle" v-if="info.music&&info.music.length>0">音色</span>
      <label class="text-val">
        <span class="music-label" v-for="m in info.music" :key="m">
          <i class="fa fa-music m-w" aria-hidden="true" v-if="m==1"></i>
          <i class="fa fa-music m-r" aria-hidden="true" v-else-if="2"></i>
          <i class="fa fa-music m-b" aria-hidden="true" v-else-if="3"></i>
          <i class="fa fa-music m-tb" aria-hidden="true" v-else-if="4"></i>
          <i class="fa fa-music m-g" aria-hidden="true" v-else-if="5"></i>
          <i class="fa fa-music m-y" aria-hidden="true" v-else></i>
        </span>
      </label>
    </div>
    <div class="wcrit" v-if="info.gun&&info.gun.length>0"><span class="stitle">炮击</span><label class="text-val">{{info.gun}}</label></div>
    <div class="wcrit" v-if="info.insert&&info.insert.length>0"><span class="stitle">装瓶</span><label class="text-val">{{info.insert}}</label></div>
    <div class="wcrit" v-if="info.sys&&info.sys.length>0"><span class="stitle">吸收</span><label class="text-val">{{info.sys}}</label></div>
    <div class="wcrit" v-if="info.parcial&&info.parcial.length>0"><span class="stitle">偏射</span><label class="text-val">{{info.parcial}}</label></div>
    <div class="wcrit" v-if="info.spBullet&&info.spBullet.length>0"><span class="stitle">特殊弹</span><label class="text-val">{{info.spBullet}}</label></div>
    <div class="wcrit"><span class="stitle" v-if="info.music&&info.music.length>0">装瓶</span>
      <label class="text-val">
        <span class="music-label" v-for="m in info.arco" :key="m">
          {{m}}
        </span>
      </label>
    </div>
    <div class="wattr">子弹类型</div>
    <div class="diliver"/>
    <div><br/></div>
    <div class="wcrit" v-if="lvBulletData">
      <wid-table :headers="headers" :data="lvBulletData" :widths="widths" :type="type"/>
    </div>
    <div><br/></div>
    <div class="wcrit" v-if="specBulletData">
      <wid-table :headers="specHeaders" :data="specBulletData" :widths="specWidths" :type="specType"/>
    </div>
    <div><br/></div>
    <div class="wcrit" v-if="attrBulletData">
      <wid-table :headers="attrHeaders" :data="attrBulletData" :widths="attrWidths" :type="attrType"/>
    </div>
    <div v-if="info.prod">
      <div class="wattr">【锻造材料】</div>
      <div class="diliver"/>
      <div class="witem" v-for="p in info.prod" :key="p">{{p}}</div>
    </div>
    <div v-if="info.stren">
      <div class="wattr">【强化材料】</div>
      <div class="diliver"/>
      <div class="witem" v-for="str in info.stren" :key="str">{{str}}</div>
    </div>
  </div>
</template>
<script>
import {get} from '@/util'
import sharkBar from '@/components/weapon/SharkBar'
import widTable from '@/components/WidTable'
export default {
  props: [
    'id'
  ],
  data () {
    return {
      dataList: [],
      shark: [30, 10, 10, 20, 0, 0, 30],
      btnCheck: true,
      lvBulletData: null,
      specBulletData: null,
      attrBulletData: null,
      info: {
        id: '',
        type: '',
        name: '',
        rate: '',
        shark: [0, 0, 0, 0, 0, 0, 100],
        act: 0,
        crit: '',
        num: 0,
        attr: [],
        music: [],
        gun: '',
        insert: '',
        sys: '',
        bullet: [],
        parcial: '',
        spBullet: '',
        arco: [],
        prod: [],
        stren: []
      },
      headers: ['类型', 'LV1', 'LV2', 'LV3'],
      widths: [
        '40%', '20%', '20', '20'
      ],
      type: [
        0, 0, 0, 0
      ],
      specHeaders: ['类型', 'LV1', 'LV2'],
      specWidths: [
        '40%', '30%', '30'
      ],
      specType: [
        0, 0, 0
      ],
      attrHeaders: ['类型', '数量'],
      attrWidths: [
        '40%', '60%'
      ],
      attrType: [
        0, 0
      ]
    }
  },
  components: {
    sharkBar,
    widTable
  },
  methods: {
    async getInfo (id) {
      wx.showNavigationBarLoading()
      const infoData = await get('/weapp/winfo', null)
      this.info = infoData
      this.lvBulletData = this.info.levelBullet
      this.attrBulletData = this.info.attrBullet
      this.specBulletData = this.info.specBullet
      console.log(this.attrBulletData)
      wx.hideNavigationBarLoading()
    }
  },
  mounted () {
    this.getInfo(this.id)
  },
  watch: {

  }
}
</script>
<style scoped>
  .container{
    background-color: #ffffff;
    color: #212121;
  }
  .wname{
    font-size: 18px;
    font-weight: bold;
    color: #520556;
    padding-bottom: 20px;
  }
  .container>div{
    font-weight: bold;
    margin-bottom: 5px;
  }
  .stitle{
    color: #575757;
    margin-right:20px;
    font-weight: normal;
    display: inline-block;
    width: 60px;
  }
  .wattr{

    padding-top:20px;
  }
  .wattr,.wtype,.wrate,.wcrit,.witem,.wact{
    font-size: 14px;
  }
  .diliver{
    border-top:1px solid #eeeeee;
    margin-top: 5px;
    margin-bottom: 20px;
  }
  .witem{
    color: #575757;
  }
  .text-val{
    width: calc(100% - 80px);
    display: inline-block;
  }

  /* 音色 */
  .m-w{
    color: #eeeeee;
  }
  .m-r{
    color:red;
  }
  .m-g{
    color: green;
  }
  .m-y{
    color: yellow;
  }
  .m-tb{
    color:#00bcd4;
  }
  .m-b{
    color:blue;
  }
  .music-label{
    margin: 0 5px;
  }
</style>


